* {
  margin: 0px;
  padding: 0px;
}
.MAX {
  width: 1593px;
  height: 1000px;
  /* 朦胧色 */
  background-color: rgba(185, 171, 171, 0.01);
  margin: 20px auto;
  position: relative;
}
.TopMAX {
  height: 180px;
  background-color: transparent;
  position: relative;
  border-bottom: 1px solid rgba(222, 222, 222, 0.8);
  color: white;
}

.TopMAX > p {
  text-indent: 1em;
  padding-top: 30px;
  font-size: 60px;
}

.TopMAX > a {
  padding-top: 30px;
  text-decoration-line: none;
  font-size: 30px;
  margin-left: 50px;
  color: white;
}

.TopMAX > a:hover {
  text-decoration-line: underline;
  color: blue;
}

.Hreff {
  margin-left: 100px;
  font-size: 30px;
  color: rgba(222, 222, 222, 0.8);
}
/* .JJJ{
    display: inline;
    position: absolute;
    left: 40.3%;
    top: 19%;
    width: 0;
    height: 0;
    border-top: 20px solid cyan;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
} */
/* .JJJ_right{
    display: inline;
    position: absolute;
    left: 40.3%;
    top: 19%;
    width: 0;
    height: 0;
    border-left: 20px solid cyan;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
} */
/* .YAN_SHI_HEZI{
    position: absolute;
    left: 38%;
    top: 31.2%;
    background-color: rgba(222, 222, 225, 1);
    width: 6%;
    height: 0%;
    transition: height 0.2s;
    overflow: hidden;

} */

.LeftMAX {
  width: 384px;
  height: 1500px;
  margin-top: -10px;
  border-radius: 0px;
  border: none;
}
.RightMAX {
  width: 1250px;
  height: 500px;
  border-radius: 7px;
  position: absolute;
  left: 450px;
  top: 200px;
}
.LeftMAX > div {
  /* width: %; */
  /* height: 30px; */
  /* background-color: rgba(255, 255, 255, 0.5); */
  /* border: radius 0px; */
  /* margin-left: 10%;
    margin-top: 4%; */

  /* border: 2px solid rgba(255, 255, 255, 0.5);; */
}

.LeftMAX p {
  color: white;
  font-size: 30px;
  padding-top: 20px;
}

.LeftMAX li {
  color: white;
  padding-top: 30px;
  padding-left: 50px;
  font-size: 25px;
}
.LeftMAX li > a {
  color: rgba(222, 222, 225, 0.8);
  text-decoration-line: none;
}
.LeftMAX li > a:hover {
  color: rgb(83, 233, 23);
  /* cursor: url(../pc01/sword_white_01.png), auto; */
}
.demo {
}
.demo > div {
  width: 120px;
  height: 55px;
  margin: 5px 5px;
  /* border: 2px solid black; */
  display: inline-block;
  text-align: center;
  background-color: rgba(185, 171, 171, 0.29);
}

.demo > div:hover {
  background-color: orange;
}
.demo p {
  padding-top: 20px;
  font-size: 21px;
  color: white;
  /* cursor: pointer; */
}

.RightMAX > div {
  width: 1150px;
  height: 70px;
  /* background-color: rgba(255, 255, 255, 0.5); */
  border-radius: 2px;
  margin-left: 49px;
  padding-left: 30px;
  padding-right: 3px;
  margin-top: 5px;
  border: 2px dotted rgba(255, 255, 255, 0.5);
}

/* 
.divmax{
    width: 100%;
    height: 496%;
    margin-top: 1.2%;
    background-color: rgba(222, 222, 222, 0.3);
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.5);;
} */
/* .divmax>div{

    width: 96%;
    height: 1%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 7px;
    margin-left: 2%;
    margin-top: 10%;

} */
/* .CONtrols{
    width: 100%;
    height: 20%;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.5);
} */

.KongJian {
  position: absolute;
  left: 1%;
  top: 1%;
}
.CONtrols > img {
  width: 12%;
  transition: all 0.4s;
  overflow: hidden;
}
.CONtrols > img:hover {
  transform: scale(1.1);
}

.Dian_Xian {
  position: absolute;
  left: 37.5%;
  top: 35%;
  width: 0px;
  height: 20%;
  overflow: hidden;
  transition: width 3s;
  color: #7de6e2;
}
.Practice {
  width: 100%;
  height: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.Practice input {
  margin-top: 3%;
  background-color: transparent;
  outline: none;
  outline-color: rgba(255, 255, 255, 0.5);
  color: yellow;
  width: 12%;
  font-size: 130%;
}
.Answer {
  width: 100%;
  height: 29%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
}
.Answer > img {
  transition: all 0.4s;
  overflow: hidden;
}
.Answer > img:hover {
  transform: scale(1.1);
}
.divmax img {
  width: 5%;
  border-radius: 50%;
}

.Answer span {
  position: absolute;
  left: 10%;
  top: 65%;
  overflow: hidden;
  width: 0px;
  transition: width 3s;
  /* border-bottom-left-radius: 0px; */
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.DAO_JI_SHI {
  position: absolute;
  left: 77%;
  top: 10%;
  width: 22%;
  height: 80%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: none;
}
.DAO_JI_SHI_TIME {
  position: absolute;
  left: 50%;
  top: 10%;
  width: 40%;
  height: 80%;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.TIME_INPU {
  width: 80%;
  height: 100%;
  margin-top: -5%;
  font-size: 200%;
  background-color: transparent;
  border: none;
}

.demo01_INPUT_01 {
  color: yellow;
}
.demo02_INPUT_01 {
  color: yellow;
}
.demo03_INPUT_01 {
  color: yellow;
}
.demo04_INPUT_01 {
  color: yellow;
}
.demo05_INPUT_01 {
  color: yellow;
}
.demo06_INPUT_01 {
  color: yellow;
}
.demo07_INPUT_01 {
  color: yellow;
}
.demo08_INPUT_01 {
  color: yellow;
}
